<template>
  <div class="future">
    <GeoLocation/>
    <div>
    <div class="seven">
        <span class="color">{{location.name}}</span>
        未来7日的天气
    </div>
    <ul>
      <li v-for="(item, index) in daily" :key="index">
        <h3>{{ item.fxDate }}</h3>
        <p>白天天气：<i :class="'qi-' + item.iconDay "></i></p>
        <p>夜间天气：<i :class="'qi-' + item.iconNight "></i></p>
        <p>最高气温：{{ item.tempMax }}℃</p>
        <p>最低气温：{{ item.tempMin }}℃</p>
        <p>白天风向：{{ item.windDirDay }}</p>
        <p>白天风力等级：{{ item.windScaleDay }}</p>
        <p>紫外线强度指数：{{ item.uvIndex }}</p>
        <p>相对湿度：{{ item.uvIndex }}%</p>
      </li>
    </ul>
  </div>
  </div>

</template>

<script>
import { API_DAY,KEY } from "@/common/constrant";
import axios from "axios";
import { mapState } from 'vuex';
import GeoLocation from '@/components/GeoLocation.vue';


export default{
   components: {
    GeoLocation},
  data(){
    return{
      daily:{},
    };
  },
  computed:{
    ...mapState([
      "location"
    ]),
  },
  created(){
    this.getData();
  },
  methods:{
    getData(){
      axios
      .get(API_DAY,{
        params:{
          key:KEY,
          location:this.location.id,
          },
          }).then((res)=>{
            console.log(res.data);
            this.daily = res.data.daily;
            });
       },
  },
  watch: {
    //当监听到location有变化时,重新调用网络请求getData,发起新的请求
    location: function () {
      this.getData();
    },
  },
};
</script>
<style scoped>
.color{
  color: red;
}
.seven{
  margin-top: 1em;
}
ul {
  list-style: none;
  margin-left: 0.5em;
}
li {
  width: 180px;
  height: 370px;
  float: left;
}
li:nth-child(odd){
  background-color:rgb(78, 78, 197);
}
li:nth-child(even){
  background-color:rgb(230, 87, 87);
}
h4{
  color: white;
}
p{
  color: white;
}
</style>
